import React from 'react';
// import './App.css';

//声明一个类式组件
export default class App extends React.Component{
  //数据驱动视图
  state = {
    isNight: true
  }

  // render 方法中的 this 指向『实例对象』
  render(){
    return <div>
      <h2>当前的状态: {this.state.isNight ? '夜晚' : '白天'}</h2>
      <button onClick={this.handleClick}>点击切换白天与黑夜</button>
    </div>
  }

  //声明一个方法   箭头函数赋值的形式 解决 this 的指向问题
  handleClick = () => {
    //修改状态
    this.setState({
      isNight: !this.state.isNight
    })
  }

}
